<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../static/echarts.min.js"></script>
  </head>

  <body>
    <div id="main" style="width: 100%; height: 500px"></div>

    <script>
      const values = [
        [40, 60, 23, 10],
        [20, 30, 30, 5],
        [30, 20, 30, 3],
        [10, 20, 30, 1],
      ];
      // 初始化 ECharts 实例
      const chart = echarts.init(document.getElementById("main"));

      // 配置项
      const option = {
        title: {
          text: "多维数组数据展示的柱状图",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow", // 使用阴影指示器
          },
        },
        legend: {
          data: ["系列1", "系列2", "系列3", "系列4"], // 设置图例名称
        },
        xAxis: {
          type: "category",
          data: ["类别1", "类别2", "类别3", "类别4"], // 每个类目轴项的名称
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "系列1",
            type: "bar", // 柱状图
            data: values[0], // 对应第一组数据
            barWidth: 20, // 设置柱子的宽度
          },
          {
            name: "系列2",
            type: "bar", // 柱状图
            data: values[1], // 对应第二组数据
            barWidth: 20,
          },
          {
            name: "系列3",
            type: "bar", // 柱状图
            data: values[2], // 对应第三组数据
            barWidth: 20,
          },
          {
            name: "系列4",
            type: "bar", // 柱状图
            data: values[3], // 对应第四组数据
            barWidth: 20,
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表
      chart.setOption(option);
    </script>
  </body>
</html>
